<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="table.js"></script>
    <script type="text/javascript" src="custom-table-fields.js"></script>
  </head>
  <body>

    <style>
      table tr td :last-child {
        margin-bottom: 0;
      }
    </style>

    <div class="container">
      <h2>table.js: event</h2>
      <div id="table"></div>
    </div>

    <script>

      table.element = "#table";

      // Extemd table library field types
      for (z in customtablefields) table.fieldtypes[z] = customtablefields[z];

      table.fields = {
        'id':{'type':"fixed"},
        'name':{'type':"text"},
        'tag':{'type':"text"},
        'public':{'type':"icon", 'trueicon':"icon-globe", 'falseicon':"icon-lock"},

        // Actions
        'edit-action':{'title':'', 'type':"edit"},
        'delete-action':{'title':'', 'type':"delete"}
      }

      table.groupby = 'tag';

      table.data = [
        {id:1,name:'house power',tag:'house', 'public':false},
        {id:2,name:'house kWhd',tag:'house', 'public':false},
        {id:3,name:'solar power',tag:'solar', 'public':false},
        {id:4,name:'solar kWhd',tag:'solar', 'public':false}
      ];

      table.draw();

      $("#table").bind("onEdit", function(e){
        // Things to do when a row edit icon is clicked
      });

      $("#table").bind("onSave", function(e,id,fields_to_update){
        // Update the server feed via an AJAX request
        // feed.set(id,fields_to_update); 
      });

      $("#table").bind("onDelete", function(e,id){
        // Delete the feed on the server
        // feed.delete(id); 
      });

    </script>
  </body>
</html
